<template>
  <div>
     <h1>Vue的基本语法</h1>
     <ol>
      <li>任何一个Vue文件由三部分组成：template、script、style</li>
      <li>vue使用的html模板语法</li>
      <li>html模板语法</li>
      <li>第一：{{}}插值语法</li>
      <li>num:{{num}}</li>
      <li>{{arr}}</li>
     </ol>
     <p v-for="(item,index) in arr":key="index">
     </p>
     <p>{{obj.name}}</p>
     <p>{{obj.age}}</p>
     <p v-for="(item,key) in obj":key="item">
     {{key}}---{{item}}
     </p>
     <hr/>
     <ul>
      <li v-for="item in arrobj":key="item.id">
      {{item.name}}---{{item.age}}
      </li>
     </ul>
     <input type="button" class="btn-danger" value="num加" v-on:click="fn"/>
     <input type="button" class="btn-danger" value="修改数值" v-on:click="fn1"/>
     <input type="button" class="btn-danger" value="修改对象" v-on:click="fn2"/>
     <input type="button" class="btn-danger" value="修改对象" v-on:click="fn3"/>
  </div>
</template>
<script setup lang="ts">
  //数据驱动视图
  //在vue 声明数据时一定声明成响应式数据
  //ref:一般用来声明基本类型:数值类型、布尔类型、字符串
  import {ref,reactive} from 'vue'
  let num= ref(100)
  let arr=reactive([1,2,3,4])
  let obj = reactive({
    name:"张三",
    age:12
  })

  let arrobj=reactive([
    {id:1,name:'张三',age:20},
    {id:2,name:'李四',age:21},
    {id:3,name:'赵武',age:22},
    {id:4,name:'张七',age:23},
    {id:5,name:'王五',age:24},
  ])

  const fn=()=>{
   num.value++;
   console.log(num.value);
  }

  const fn1=()=>{
  arr[3]=100;
  }
  const fn2=()=>{
    obj.name="李四"
  }
  const fn3=()=>{
    arrobj[2].age=50;
    arrobj[2].name='溜达'
  }
</script>

<style scoped>

</style>